/* 注册登录页面 */
* {
    box-sizing: border-box;
}

body {
    background      : none;
    background-color: white;
    font-size       : 14px;
    color           : #515151;
    margin          : 0;
    padding         : 0;
}

a {
    color: #515151;
}

.header {
    height        : auto;
    padding-top   : 28px;
    padding-bottom: 40px;
    max-width     : 1200px;
    position      : relative;

    a {
        float   : left;
        height  : 20px;
        width   : 110px;
        overflow: hidden;
        display : block;

        i.icon {
            width     : 100%;
            height    : 100%;
            display   : block;
            background: url('../images/reg-log/base.png') -2px -4px no-repeat;
        }
    }
}

.content {
    position  : relative;
    min-height: 750px;
    max-height: 1080px;
    background: linear-gradient(180deg, #edfcfd 0%, #faffff 100%);

    &::before {
        position           : absolute;
        content            : ' ';
        top                : 0;
        left               : 0;
        bottom             : 0;
        right              : 0;
        margin             : 0 auto;
        height             : 100%;
        width              : 100%;
        min-width          : 1240px;
        max-width          : 1920px;
        background         : url('../images/reg-log/background.png') no-repeat;
        background-position: 50% 50%;
    }

    .content-box {
        position: relative;
        width   : 1240px;
        height  : 750px;
        margin  : 0 auto;
    }
}

/* 注册 */
.reg-box {
    width           : 368px;
    position        : absolute;
    top             : 16%;
    right           : 85px;
    background-color: #FFF;
    padding         : 72px 35px 20px;
    border-radius   : 2px;
    box-shadow      : 0 6px 12px 0 rgba(138, 153, 150, 0.15);

    h2 {
        font-size : 18px;
        text-align: center;

        a {
            color: #387aff;

            &:hover {
                color: #3058df;
            }
        }
    }

    .tip-box {
        position     : relative;
        height       : 33px;
        display      : table;
        width        : 100%;
        margin-bottom: 0px;
        margin-top   : 26px;
        border       : solid 1px #ffc2b3;
        background   : #ffd1ca;
        border-radius: 2px;
        margin-bottom: 40px;

        i.error-icon {
            background: url('../images/register/error-ico.png');
            width     : 16px;
            height    : 16px;
            display   : inline-block;
            position  : absolute;
            top       : 8px;
            left      : 10px;
        }

        .tip-wrap {
            color         : #666;
            font-size     : 12px;
            padding-right : 25px;
            padding-left  : 35px;
            display       : table-cell;
            vertical-align: middle;
        }

        i.close-icon {
            background       : url('../images/register/close-ico.png');
            background-repeat: no-repeat;
            cursor           : pointer;
            width            : 16px;
            height           : 16px;
            display          : inline-block;
            position         : absolute;
            top              : 8px;
            right            : 10px;
        }
    }
}


.visibility-hidden {
    visibility: hidden;
}

.normalInput {
    position     : relative;
    display      : inline-block;
    padding      : 0px 10px;
    width        : 320px;
    height       : 50px;
    line-height  : 50px;
    font-size    : 14px;
    margin-bottom: 20px;
    border       : 1px solid #dadada;
    outline      : none;
    color        : #474747;
    overflow     : hidden;
    margin-bottom: 36px;
}

.phoneNum,
.pwd {
    width        : auto;
    font-size    : 14px;
    display      : block;
    height       : 46px;
    line-height  : 46px;
    border-radius: 2px;

    .cycode {
        display     : inline-block;
        width       : 60px;
        border-right: 1px solid #DDD;
        cursor      : pointer;

        input.cycode-input {
            width      : 60%;
            color      : grey;
            text-align : center;
            cursor     : pointer;
            line-height: 22px;
            height     : 22px;
        }

        i.arrow-icon {
            display   : inline-block;
            width     : 14px;
            height    : 8px;
            background: url('../images/reg-log/arrow-down.png') no-repeat center;
        }
    }

    input.sameInput {
        padding       : 0;
        line-height   : 22px;
        height        : 22px;
        width         : 74%;
        text-indent   : 8px;
        vertical-align: middle;
        font-size     : 14px;
        margin-bottom : 0;
    }

    input.pwd-input {
        width: 100%;
    }
}

.agreement {
    margin-bottom: 30px;
    height       : 20px;
    line-height  : 20px;
    margin-top   : 10px;
    font-size    : 12px;

    .tick {
        width         : 18px;
        height        : 18px;
        cursor        : pointer;
        display       : inline-block;
        line-height   : 20px;
        vertical-align: middle;
        overflow      : hidden;

        .untick-icon {
            display        : inline-block;
            width          : 100%;
            height         : 100%;
            overflow       : hidden;
            background     : url('../images/register/untick-icon.png') no-repeat;
            background-size: 100% 100%;
        }

        .tick-icon {
            display        : inline-block;
            width          : 100%;
            height         : 100%;
            overflow       : hidden;
            background     : url('../images/register/tick-icon.png') no-repeat;
            background-size: 100% 100%;
        }

    }

    input {
        display: none;
    }

    .agree-txt {
        cursor: pointer;
    }

}

.linkABlue {
    color: #387aff;

    &:hover {
        color: #3058df;
    }
}

.btnBlue {
    width           : 300px;
    display         : block;
    height          : 46px;
    font-size       : 14px;
    line-height     : 46px;
    text-align      : center;
    margin-bottom   : 20px;
    outline         : none;
    cursor          : pointer;
    color           : #fff;
    border-radius   : 4px;
    background-color: #387aff;

    &:hover {
        background-color: #3058df;
    }
}

/* footer */
.footer {
    bottom          : 0;
    width           : 100%;
    height          : 130px;
    border-top      : solid 1px #E5E6E7;
    background-color: #fff;
    color           : black;
    position        : static;
    border-color    : transparent;

    .footer-box {
        width      : 1000px;
        margin     : 24px auto 30px;
        height     : 50px;
        line-height: 50px;

        .footer-box-list {
            margin-top: 25px;

            li {
                float       : left;
                border-right: 1px solid #000;
                height      : 12px;
                line-height : 12px;

                &:first-child {
                    a {
                        margin-left: 0;
                    }
                }

                a {
                    text-align  : center;
                    margin-right: 10px;
                    margin-left : 10px;
                    color       : #000;
                }

                &:last-child {
                    border  : none;
                    position: relative;
                }

                i.more-icon {
                    background: url(../images/reg-log/base.png) -140px -160px no-repeat;
                    position  : absolute;
                    display   : block;
                    width     : 10px;
                    height    : 10px;
                    right     : -5px;
                    bottom    : -5px;
                }
            }
        }

        .call {
            margin-top : 5px;
            margin-left: 36px;

            .call-txt {
                margin-right: 10px;
            }

            .call-num {
                margin-right: 20px;
            }

            .call-online {
                display         : inline-block;
                *margin-top     : 5px;
                _margin-top     : 16px;
                height          : 20px;
                line-height     : 18px;
                width           : 64px;
                color           : white;
                background-color: #32a5e7;
                text-align      : center;
                border-radius   : 2px;
            }
        }

        .share-box {
            position   : relative;
            padding-top: 9px;

            a {
                margin-left: 10px;
                display    : inline-block;
                overflow   : hidden;
                width      : 32px;
                height     : 32px;

                &.show-qrcode {
                    position: relative;
                    overflow: visible;

                    &:hover .qrcode {
                        display: block;
                    }

                    .qrcode {
                        display : none;
                        position: absolute;
                        left    : -75px;
                        top     : -210px;
                        width   : 180px;
                        height  : 195px;
                        overflow: hidden;

                        img {
                            width      : 310px;
                            margin-left: -65px;
                            margin-top : -63px;
                        }
                    }
                }

                i.share-icon {
                    display   : inline-block;
                    width     : 100%;
                    height    : 100%;
                    overflow  : hidden;
                    background: url('../images/reg-log/base.png') no-repeat;
                }

                i.icon1 {
                    background-position: -218px -91px;

                    &:hover {
                        background-position: -218px -137px;
                    }
                }

                i.icon2 {
                    background-position: -302px -91px;

                    &:hover {
                        background-position: -302px -137px;
                    }
                }

                i.icon3 {
                    background-position: -344px -91px;

                    &:hover {
                        background-position: -344px -137px;
                    }
                }
            }
        }


        .copyright-box {
            width    : 1000px;
            margin   : 0px auto;
            font-size: 12px;
            color    : #7f7f7f;

            span {
                float: left;
            }

            a {
                float      : left;
                color      : #7f7f7f;
                margin-left: 6px;

                &:hover {
                    color: #2b2b2b;
                }
            }
        }
    }

}